<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-18 13:19:07
 * @FilePath: label.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <div ref="labelRef" :class="classNames">
    <div class="arco-form-item-label-required-symbol">
      <svgIcon name="xinghao"></svgIcon>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  ref,
} from "vue";
import context from "../arco-form/context.js";
import svgIcon from "../arco-icon/index.vue";
import { isNumber } from "../../../utils/is.js";
const icon = defineComponent({
  name: "Card",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: { svgIcon },
  props: {
    required: {
      type: Boolean,
      default: false,
    },
    showColon: {
      type: Boolean,
      default: false,
    },
    component: {
      type: String,
      default: "label",
    },
    asteriskPosition: {
      type: String,
      default: "start",
    },
    tooltip: {
      type: String,
    },
    attrs: Object,
  },
  emits: {
    close: () => true,
    afterClose: () => true,
  },
  setup(props) {
    const prefixCls = "arco-form-item-label";
    const formCtx = inject(context.formInjectionKey, {});

    const instance = getCurrentInstance() as any;

    console.log(formCtx, "我是什么值？？");

    const labelRef = ref();

    onMounted(() => {
      const query = uni.createSelectorQuery().in(instance.proxy);
      //获取宽度
      query
        .select(".arco-form-item-label")
        .fields(
          {
            size: true,
          },
          (res: { width: number; height: number }) => {
            console.log(res.width, "我是宽度");
            if (formCtx !== null && isNumber(res.width)) {
              formCtx.setLabelWidth(
                Math.ceil(res.width),
                instance == null ? void 0 : instance.uid,
              );
            }
          },
        )
        .exec();
      // if (labelRef.value && isNumber(labelRef.value.offsetWidth)) {
      //   formCtx == null
      //     ? void 0
      //     : formCtx.setLabelWidth(
      //         labelRef.value.offsetWidth,
      //         instance == null ? void 0 : instance.uid,
      //       );
      // }
    });

    const classNames = computed(() => {
      return [
        prefixCls,
        // `${prefixCls}-${props.type}`,
        // {
        //   [`${prefixCls}-with-title`]: Boolean(props.title || slots.title),
        //   [`${prefixCls}-banner`]: props.banner,
        //   [`${prefixCls}-center`]: props.center,
        // },
      ];
    });

    const contentStyle = computed(() => {
      return [`${prefixCls}-content`];
    });

    const labelColCls = computed(() => [
      `${prefixCls}-label-col`,
      {
        [`${prefixCls}-label-col-left`]: formCtx.labelAlign === "left",
        [`${prefixCls}-label-col-flex`]:
          formCtx.autoLabelWidth || props.labelColFlex,
      },
    ]);

    const wrapperColCls = computed(() => [
      `${prefixCls}-wrapper-col`,
      // {
      //   [`${prefixCls}-wrapper-col-flex`]: !mergedWrapperCol.value,
      // },
    ]);

    return {
      labelRef,
      prefixCls,
      classNames,
      contentStyle,
      labelColCls,
      wrapperColCls,
    };
  },
});
export default icon;
</script>

<!-- <style scoped lang="scss">
@import "./index.scss";
</style> -->
